<template>
	<view class="pages-order" v-if="detail.id">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="接单中" leftIcon="icon-left" color="#ffffff"
			:backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="detail-status fill-base flex-y-center">
			<view class="flex-1" style="padding:0 50rpx;">
				<view class="flex-between flex-1">
					<view v-if="refund == 1" class="f-sm-title text-bold" :style="{color: primaryColor}">
						{{refundType[detail.refund.status].name}}
					</view>
					<view v-else class="f-sm-title text-bold" :style="{color: primaryColor}">
						{{statusType[detail.status].name}}
					</view>
					<min-countdown v-if="detail.status == 1 && detail.over_time > 0"
						:targetTime="detail.over_time * 1000" @callback="countEnd" formatType="1" :isPlay="true"
						:type="1" style="height: 46rpx;color: #FF2404;"></min-countdown>
				</view>
				<block v-if="refund == 0">
					<view class="f-paragraph" v-if="detail.status == 1">请支付后服务人员接单</view>
					<view class="f-paragraph" v-if="detail.status == 5">等待师傅接单</view>
				</block>
			</view>
		</view>
		<!-- <view class="mt-md fill-base pl-lg pr-lg pb-sm" v-if="detail.coach_id && detail.status != 5">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">接单人信息</text>
			</view>
			<view class="flex-between pt-md pb-md">
				<image :src="detail.coach_info.work_img" mode="aspectFill" class="detail-image"></image>
				<view class="flex-center">
					<view class="f-title pr-lg">{{detail.coach_info.name}}</view>
					<i class="iconfont icondianhua" @tap="$util.goUrl({url: detail.coach_info.mobile, openType: 'call'})"></i>
				</view>
			</view>
		</view> -->
		<view class="mt-md fill-base pl-lg pr-lg pb-sm ml-md mr-md radius-16 pt-md pb-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单类型</text>
				<text class="f-desc c-icontext">需求订单（{{orderType[detail.type].name}}）</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">预约时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.start_time*1000, 'YY-M-D h:m')}}</text>
			</view>
		</view>
		<view class="mt-md fill-base pl-lg pr-lg pb-sm ml-md mr-md radius-16 pt-md pb-md">
			<block v-if="detail.status != 5">
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">联系人姓名</text>
					<text class="f-desc c-icontext">{{detail.custom_name}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">联系电话</text>
					<view class="flex-center">
						<i class="iconfont icondianhua"
							@tap="$util.goUrl({url: detail.custom_mobile, openType: 'call'})"></i>
					</view>
					<!-- <text class="f-desc c-icontext">{{detail.custom_mobile}}</text> -->
				</view>
			</block>
			<view class="pt-md pb-md flex">
				<text class="f-paragraph c-mini-title">服务地址</text>
				<view class="flex-1 flex addressContainer" style="justify-content: flex-end;">
					<text class="flex-1 f-sm-title c-warning max-500">{{detail.address}}</text>
					<view class="locationContainer" @click.stop="mapNavigaion(detail.address)">
						<image class="location" src="/static/images/location.png" mode="aspectFit"></image>
						<text :style="{color:primaryColor}">导航</text>
					</view>
				</view>
			</view>



		</view>
		<view class="mt-md fill-base pl-lg pr-lg pb-sm ml-md mr-md radius-16 pt-md pb-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务标题</text>
				<text class="f-desc c-icontext">{{detail.title}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务类别</text>
				<text class="f-desc c-icontext">{{detail.f_name + '/' + detail.s_type}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">详细描述</text>
				<text class="f-desc c-icontext max-500">{{detail.introduce}}</text>
			</view>
			<view class="pt-md pb-md">
				<text class="f-paragraph c-mini-title">图片补充</text>
				<view class="flex-1 pt-md">
					<upload :imagelist="detail.img" text="上传图片" :imageSee="true" imgclass="mini"
						:imgsize="detail.img.length" :pictureSize="5">
					</upload>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg pr-lg pt-md pb-md ml-md mr-md radius-16">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.order_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm"
						@tap="$util.goUrl({url: detail.order_code,openType: 'copy'})"
						:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">下单时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.create_time*1000, '')}}</text>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付方式</text>
				<text
					class="f-desc c-icontext">{{detail.demand_fee_switch == 1 && detail.type == 3 ? '额度支付' : '微信支付'}}</text>
			</view>
			<view class="pt-md pb-md flex-between" v-if="detail.type != 3">
				<text class="f-paragraph c-mini-title">上门费</text>
				<text class="f-desc c-warning text-bold">¥{{detail.door_money || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务费</text>
				<text class="f-desc c-warning text-bold">¥{{detail.price || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付金额</text>
				<text
					class="f-desc c-warning text-bold">¥{{(detail.total_price*1 + detail.door_money*1).toFixed(2)}}</text>
			</view>
			<view class="pt-md pb-md flex-between" v-if="detail.type == 1">
				<text class="f-paragraph c-mini-title">预估价格</text>
				<text class="f-desc c-warning text-bold">¥{{detail.es_price}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付状态</text>
				<text class="f-desc c-icontext" v-if="detail.status == -1">支付失败</text>
				<text class="f-desc c-icontext" v-else-if="detail.status == 1">未支付</text>
				<text class="f-desc c-icontext" v-else>支付成功</text>
			</view>
		</view>
		<view class="f-caption c-caption pl-lg pr-lg pt-md" v-if="detail.status == 1 && detail.type == 3">
			温馨提示：额度如已低于最低额度 {{detail.price}}，请联系管理员增加额度</view>
		<view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg" v-if="refund == 1">
			<view class="pt-md pb-md flex-between" v-if="detail.refund.refund_code">
				<text class="f-paragraph c-mini-title">退款编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.refund.refund_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm"
						@tap="$util.goUrl({url: detail.refund.refund_code,openType: 'copy'})"
						:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">退款时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.refund.create_time*1000, '')}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">取消方式</text>
				<text class="f-desc c-icontext">{{detail.cancel_type == 1 ? '用户取消' : '后台取消'}}</text>
			</view>
			<view class="pt-md pb-md flex" v-if="detail.refund.content">
				<text class="f-paragraph c-mini-title">退款说明</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 ">{{detail.refund.content}}</text>
				</view>
			</view>
			<view class="pb-md flex" v-if="detail.refund.text">
				<text class="f-paragraph c-mini-title"></text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 pre-wrap">{{detail.refund.text}}</text>
				</view>
			</view>
		</view>


		<view class="space-max-footer"></view>
		<fixed position="bottom">
			<view class="fill-base pl-lg pr-lg b-1px-t">
				<view class="flex-y-center pt-md pb-md" style="justify-content: flex-end;">
					<view class="flex-center order-btn radius-10 f-desc c-base fill-warning"
						@tap.stop="refuseOrder(detail)" v-if="detail.coach_id">拒绝接单</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md"
						v-if="[1,2].includes(coachInfo.identity)&& coachInfo.company_id"
						@tap.stop="$util.goUrl({url: `/user/pages/pool/assign?id=${detail.id}&delta=2&type=2&s_type=${detail.s_type_id}`})"
						:style="{color: `#fff`, background: primaryColor}">指派</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md"
						:style="{color: `#fff`, background: primaryColor}" @tap="orderChange">确认接单</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</fixed>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';

	export default {
		data() {
			return {
				statusType: {
					'-2': {
						name: '已退款',
						color: '#FF2404'
					},
					'-1': {
						name: '已取消',
						color: '#FF2404'
					},
					1: {
						name: '待支付',
						color: '#FF2404'
					},
					2: {
						name: '待审核',
						color: '#FF6E00'
					},
					3: {
						name: '已驳回',
						color: '#666666'
					},
					4: {
						name: '已通过',
						color: '#24C858'
					},
					5: {
						name: '待接单',
						color: '#FF6E00'
					},
					6: {
						name: '待上门',
						color: '#FF6E00'
					},
					7: {
						name: '已出发',
						color: '#FF6E00'
					},
					8: {
						name: '已到达',
						color: '#FF6E00'
					},
					9: {
						name: '服务中',
						color: '#24C858'
					},
					10: {
						name: '已完成',
						color: '#24C858'
					},
					11: {
						name: '订单完成',
						color: '#666666'
					}
				},
				refundType: {
					1: {
						name: '待审核',
						color: '#FF2404'
					},
					2: {
						name: '已通过',
						color: '#24C858'
					},
					3: {
						name: '已驳回',
						color: '#666666'
					}
				},
				orderType: {
					1: {
						name: '咨询',
						type: '订金'
					},
					2: {
						name: '一口价',
						type: '全款'
					},
					3: {
						name: '家政公司',
						type: '全款'
					}
				},
				options: {},
				lockTap: false,
				detail: {},
				payModel: {
					1: '微信支付'
				},
				refund: 0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			coachInfo: state => state.user.coachInfo,
			location: state => state.user.location,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.refund = options.refund || 0
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updatePoolItem', 'updateHomeItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				this.getOrderInfo()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getOrderInfo() {
				let data = await this.$api.demand.demandInfo({
					id: this.options.id
				})
				if (data.img) {
					data.img = data.img.split(',').map(item => {
						return {
							path: item
						}
					})
				}
				this.detail = data
				this.$util.hideAll()
			},
			async orderChange() {
				if (this.location.address.indexOf(this.coachInfo.city) == -1) {
					this.$util.showToast({
						title: '不能跨市接单'
					})
					return
				}
				if (!this.coachInfo.id_code) {
					let [res_del, {
						confirm
					}] = await uni.showModal({
						content: `请补全信息且审核通过再接单`,
					})
					if (confirm) {
						this.$util.goUrl({
							url: `/user/pages/service-apply`
						})
						return
					}
					if (!confirm) return;
				}

				uni.showModal({
					title: '提示',
					content: '是否确认接单',
					success: async function(res) {
						this.$util.showLoading()
						await this.$api.demand.updateOrderStatus({
							id: this.options.id,
							status: 6
						})
						this.$util.hideAll()
						this.$util.showToast({
							title: '接单成功'
						})
						this.updateHomeItem({
							key: 'pageActive',
							val: false
						})
						setTimeout(() => {
							this.$util.back()
							this.$util.goUrl({
								url: 1,
								openType: 'navigateBack'
							})
						}, 1500)

					},
				})



			},
			refuseOrder(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认接单',
					success: async function(res) {
						this.$util.goUrl({
							openType: 'call',
							url: this.coachInfo.service_tel
						})

					},
				});
				
			},
			countEnd() {
				this.initRefresh()
			},
			mapNavigaion(address) {

				this.$util.encodeAddress(address).then(data => {
					this.$util.mapNavigation(data.latitude, data.longitude, address)
				})
			},
		},
	}
</script>


<style lang="scss">
	.pages-order {
		.detail-status {
			height: 160rpx;
		}

		.detail-image {
			width: 94rpx;
			height: 94rpx;
			border-radius: 94rpx;
		}

		.order-image {
			width: 160rpx;
			height: 160rpx;
		}

		.order-btn {
			width: 152rpx;
			height: 62rpx;
		}

		.cancel-btn {
			border: 1px solid #979797;
		}

		.copy-btn {
			border-radius: 4px;
		}
	}


	.addressContainer {
		margin-left: 20px;

		.locationContainer {
			margin-right: 0px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.location {
				width: 30px;
				height: 30px;
			}
		}
	}
</style>